/* Dit is de stylesheet van de responsive website Colours & Style by Carla versie 2.0 */

/* Make it responsive' */ 

/* EM:   Relative to the font-size of the element (2em means 2 times the size of the current font) */


@media only screen and (max-width: 600px) {
    body {
      background-color: lightblue;
    }
  }


/* 
  Best Practice
  It is best practice to use relative file paths (if possible).
  When using relative file paths, your web pages will not be bound to your current base URL. All links will work on your own computer 
  (localhost) as well as on your current public domain and your future public domains. 
*/

/* This sets the margin property to auto to horizontally center the element within its container. 
The element will then take up the specified width, and the remaining space will be split equally between the left and right margins. */
div {  
  margin: auto;
}


/* Make the grid container  */
#myDIV {
  height: 500px;  /* dit getal bepaalt de hoogte van de container */
  display: grid;
  gap: 1px;
  background-color: lightblue;
  padding: 10px;
  grid-template-columns: auto auto auto;
  grid-template-rows: 4auto auto auto;
}

#myDIV div {
  background-color: lightblue transparent;
  text-align: center;
  padding: 5px 0;
  font-size: 30px;
}


/* end of making grid-container */

/* Style de body van de website */
body {
  background-color: lightblue;
  /* Standaard lettertype voor de website */
  font-family: 'Open Sans ';
  font-size: 18x;
}


/* Styling the images */
img.a {
  max-width: 100%;
  height: auto;
  object-fit: cover;
  position: absolute;
  left: 5px;
  top: 10px;
}

/* Styling the text */
h1 {
  color: blue;
  text-align: center;
/* schaduw-letters voor het welkom */
  text-shadow:
    0 1px 0 #fff,
    0 2px 0 #fff,
    0 3px 0 #fff,
    0 4px 0 #fff,
    0 5px 0 #fff,
    0 6px 0 #fff,
    0 7px 5px #fff;
}

h2 {
  color: white;
  text-align: center;
}

  /* Settings voor Social Media Sidebar */
.social-sidebar {
  position: absolute;
  top: 18%;
  right: 2%; /* Bijna aan de rand rechts, maar toch een beetje ingesprongen */
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  z-index: 1000;
}

.social-button {
  position: relative;
  background-color: lightblue;
  border: none;
  cursor: pointer;
  padding: 5px; /* afstand van de buttons tot elkaar */
  border-radius: 50%;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.2); /* geen box shadow in dit design */

    /* Dit laat de sidebar op en neer bewegen, als je wilt */
    /*
    transition: transform 0.2s;
    animation: float 2.5s ease-in-out infinite;
    */
}
  
.social-button:hover {
    transform: scale(1.1);
}

.social-button img {
    width: 24px;
    height: 24px;
}

.social-button::after {
    content: attr(data-tooltip);
    position: absolute;
    right: 110%;
    top: 50%;
    transform: translateY(-50%);
    background-color: #333;
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    font-size: 14px;
}

.social-button:hover::after {
    opacity: 1;
}

@keyframes float {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }

    100% {
        transform: translateY(0);
    }
}

@media (max-width: 600px) {
    .social-sidebar {
        flex-direction: row;
        top: auto;
        bottom: 10px;
        right: 50%;
        transform: translateX(50%);
    }

    .social-button::after {
        right: 50%;
        top: -40px;
        transform: translateX(50%);
    }
}

/* End Settings Social Media Sidebar*/

/* The Horizontal Ruler Line*/
hr.topline {
  border-top: 5px
    /* dikte van de lijn */
    solid blue;
}

/* Maak de dobbelsteen */

.dice {
  position: relative;
  margin: 0 auto;
  height: 700px;
  width: 700px;
  animation: spin 4s infinite alternate;
  transform-style: preserve-3d;
}

img {
  max-width: 75%;
}

img {
  max-height: 75%;
}

@keyframes spin {
  0% {
    transform: rotateX(90deg) rotateY(360deg) translateZ(90px);
  }

  20% {
    transform: rotateY(45deg) rotateX(-270deg) translateZ(0px);
  }

  40% {
    transform: rotateX(-90deg) rotateX(-180deg) translateZ(90px);
  }

  60% {
    transform: rotateY(45deg) rotateY(90deg) translateZ(0px);
  }

  80% {
    transform: rotateX(-45deg) rotateX(360deg) translateZ(90px);
  }

  100% {
    transform: translateZ(0px);
  }
}

.container:hover .dice {
  animation: none;
  width: auto;
}

.dice>div {
  position: absolute;
  height: 200px;
  width: 200px;
  transition: all 0, 5s;
  opacity: 0, 5;
}

.container:hover .dice>.side {
  transition: all 2s;
  position: relative;
  transform: none;
  opacity: 1;
  /* deze waarde was 5*/
  display: inline-block;
  margin: 1%;
}

.container .dice>.side:hover {
  transform: scale(1.1);
}

.one {
  transform: rotateX(90deg) translateZ(100px);
  background-color: pink;
}

.two {
  transform: translateZ(100px);
  background-color: lightseagreen;
}

.three {
  transform: rotateY(90deg) translateZ(100px);
  background-color: yellow;
}

.four {
  transform: rotateY(180deg) translateZ(100px);
  background-color: green
}

.five {
  transform: rotateY(-90deg) translateZ(100px);
  background-color: lightskyblue;
}

.six {
  transform: rotateX(-90deg) translateZ(100px);
  background-color: red;
}

/* END Maak de dobbelsteen */

/* Hover text bij uitgevouwen dobbelsteen vlakken */

* {
  box-sizing: border-box;
}

/* Maak de blauwe balk voor de dobbelsteen */
.container {
  height: 40%;
  perspective: 2900vm;
  background: #0101ff;
  margin-top: 2%;
}

.image {
  display: block;
  width: 25%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.0);
  /* Black see-through */
  color: #f1f1f1;
  width: 100%;
  transition: .5s ease;
  opacity: 1;
  color: darkblue;
  font-size: 15px;
  padding: 5px;
  text-align: center;
}

.container:hover .overlay {
  opacity: 1;
}

img {
  opacity: 1;
}
/* END Maak de dobbelsteen */

/* Hover text bij uitgevouwen dobbelsteen vlakken */
* {
  box-sizing: border-box;
}

/* Einde dobbelsteen */

/* Maak de blauwe balk voor de dobbelsteen */
.container {
  height: 40%;
  perspective: 2900vm;
  background: #0101ff;
  margin-top: 2%;
}

.image {
  display: block;
  width: 25%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.0);
  /* Black see-through */
  color: #f1f1f1;
  width: 100%;
  transition: .5s ease;
  opacity: 1;
  color: darkblue;
  font-size: 15px;
  padding: 5px;
  text-align: center;
}

.container:hover .overlay {
  opacity: 1;
}

img {
  opacity: 1;
}

/* Einde blauwe balk */

/* opmaak voor Copyright en Release info */
p.dice-donkeretekst {
  color: darkblue;
  text-align: center;
  font-size: 15px;
}

p.dice-lichtetekst {
  color: white;
  text-align: center;
  font-size: 15px;
}

/* opmaak voor Copyright en Release info */
p.copyright {
  color: darkblue;
  text-align: center;
  font-size: 12px;
}

p.release {
  color: red;
  text-align: center;
  font-size: 12px;
}